<script setup lang="ts">
// vue3中组件引入后不需要使用components注册，可以直接使用
import Header from "./header/Header.vue";
import Menu from "./menu/Menu.vue";
import { Message, Setting } from "@element-plus/icons-vue";

const color_setting = "red";
</script>

<template>
    <el-container class="layout-container-demo">
        <!-- layout布局左侧菜单区 -->
        <el-aside class="aside" width="300px">
            <el-scrollbar>
                <Menu></Menu>
            </el-scrollbar>
        </el-aside>

        <!-- layout布局内容区 -->

        <el-container>
            <el-header class="header">
                <div class="toolbar">
                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px" :color="color_setting">
                            <setting />
                        </el-icon>
                        <template v-slot:dropdown>
                            <el-dropdown-menu style="background: darkturquoise">
                                <el-dropdown-item style="color: red">View</el-dropdown-item>
                                <el-dropdown-item>Add</el-dropdown-item>
                                <el-dropdown-item>Delete</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>Tom</span>
                </div>
            </el-header>

            <el-main class="content">
                Mainflsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddd000000000000000000000000000000000000000000000000000000000001
                Mainflsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddd000000000000000000000000000000000000000000000000000000000002<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                Mainflsd<br />
                jflsdjf
            </el-main>

            <!-- <el-footer>
      </el-footer> -->
        </el-container>
    </el-container>
</template>

<style scoped lang="less">
// 定义全局变量
@color_header: rgb(125, 173, 204);

.layout-container-demo {
    height: 100%;
    background-color: @color_header;

    .header {
        font-size: 12px;
    }

    .toolbar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
        text-align: left;
    }

    .content {
        padding: 0;
        background-color: rgb(245, 217, 147);
    }
}

.size {
    width: 100%;
    height: 100%;
}

html,
body {
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    .size;

    #app {
        .size;
    }
}
</style>

<!-- 
  <style lang="less">
@prefix-cls: ~'@{namespace}-app';


.@{prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
</style> 
-->
